<template>
  <div id="accept">
    <el-button size="mini" type="text" @click="to">接单</el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="'接单'" width="680px">
      <el-form ref="form" :model="value" :inline="true" :rules="rules" size="small" label-width="80px">
        <el-form-item label="工程师" prop="engineer">
          <el-input v-model="value.engineer" style="width: 200px;" />
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button :loading="loading" type="primary" @click="handleSubmit">确认</el-button>
        <el-button type="text" @click="cancel">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'AcceprOrder',
  props: {
    data: {
      type: Object,
      required: true
    },
    supThis: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false, dialog: false,
      value: {
        id: '',
        engineer: '',
        status: '300'
      },
      rules: {
        engineer: [
          { required: true, message: '请填写工程师', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    to() {
      this.value.id = this.data.id
      this.dialog = true
    },
    cancel() {
      this.resetForm()
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          const _this = this
          request({
            url: 'api/tWorkOrder/accept',
            method: 'post',
            data: _this.value
          }).then(res => {
            this.resetForm()
            this.$notify({
              title: '接单成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
            this.supThis.init()
          }).catch(err => {
            this.loading = false
            console.log(err)
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.value = {
        id: '',
        engineer: ''
      }
    }
  }
}
</script>

<style scoped>
  #accept{
    display: inline-block;
    margin-right: 3px;
  }
</style>
